.vip{
  .vip-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 540px;
    z-index: 0;
    background: #000;
  }
  .vip-nav-bar{
    color: #e7be74;
    position: relative;
    z-index: 1;
    line-height: 64px;
    text-align: center;
  }

  .vip-header{
    position: relative;
    z-index: 1;
    margin: 50px;
    margin-top: 10px;
    height: 320px;
    padding: 44px 32px;
    box-sizing: border-box;
    background-size: cover;
    border-radius: 20px;
    color: #1D2129;
    .header-box{
      display: flex;
      justify-content: space-between;
      line-height: 1;
      .box-info{
        font-size: 28px;
        .h2{
          font-size: 32px;
          margin-bottom: 24px;
          font-weight: 700;
        }
      }
      .box-price{
        font-size: 28px;
        text-align: right;
        .box-flex{
          margin-top: 24px;
          align-items: center;
        }
      }
    }
  }  //  vip-header end

  .vip-main{
    position: relative;
    z-index: 1;
    padding: 44px 22px;
    background: #fff;
    margin-top: -120px;
    .main-bg{
      width: 100vw;
      position: absolute;
      top: -60px;
      left: 0;
    }
    .main-button{
      width: 414px;
      line-height: 82px;
      background: #3c3935;
      color: #FFF0D3;
      font-size: 30px;
      text-align: center;
      border-radius: 40px;
      position: absolute;
      top: -82px;
      left: calc(50% - 207px);
    }
    .main-list{
      border-radius: 32px;
      box-sizing: border-box;
      background: #fff;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .list-item{
        width: 20%;
        font-size: 24px;
        color: #616469;
        text-align: center;
        line-height: 36px;
        padding: 0;
        margin-bottom: 32px;
        .item-icon{
          width: 80px;
          height: 80px;
        }
      }
    }  /// main-list end

    .main-gift{
      border-radius: 24px;
      background: linear-gradient(180deg, #FFF6E7 0%, #FFFFFF 100%);
      padding: 24px;
      .gift-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .h2{
          font-size: 32px;
          font-weight: 500;
          color: #1D2129;
        }
        .h2-span{
          font-size: 28px;
          color: #8E9094;
        }
      }

      .gift-list{
        margin: 24px 0;
        display: flex;
        justify-content: space-between;
        .list-item{
          width: 49%;
          padding: 40px 0;
          text-align: center;
          color: #968055;
          font-size: 24px;
          background: #fff;
          border-radius: 20px;
          .item-card{
            background: linear-gradient(115.82deg, #FEEAC8 0%, #F2D190 87.01%);
            color: #66490E;
            border-radius: 20px;
            width: 192px;
            margin: 0 auto;
            padding: 24px 0 14px;
            margin-bottom: 22px;
            .price{
              font-size: 48px;
              font-weight: 700;
            }
          }
        }
      }

      .gift-goods{
        display: flex;
        overflow-x: auto;
        font-size: 24px;
        margin-top: 24px;
        .goods-item{
          margin-right: 16px;
          width: 152px;
          text-align: center;
          background: #fff;
          border-radius: 20px;
          overflow: hidden;
          .item-img{
            width: 152px;
            height: 152px;
            display: block;
          }
          .h2{
            line-height: 50px;
          }
        }
      }
    } //  main-gift end

    .main-privilege{
      .title{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin: 24px 0;
        color: #66490E;
        &::before,&::after{
          width: 106px;
          height: 4px;
          background: linear-gradient(270deg, #F7DFAB 100%, #F1BE8F 0%);
          border-radius: 4px;
          display: block;
          content: '';
          margin: 0 10px;
        }
      }

      .privilege-list{
        border-radius: 24px;
        padding: 24px;
        background: linear-gradient(180deg, #FFF6E7 0%, #FFFFFF 100%);
        .list-item{
          margin-bottom: 24px;
          .item-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            .h2{
              font-size: 32px;
              font-weight: 500;
              color: #1D2129;
            }
            .h2-span{
              font-size: 28px;
              color: #8E9094;
            }
          }
          .item-img{
            width: 160px;
            height: 160px;
            margin-right: 24px;
            border-radius: 20px;
          }
          .item-info{
            font-size: 24px;
            color: #777A7F;
          }
          .h2{
            font-size: 30px;
            color: #1D2129;
          }
        }
      }
    }


  }  //  vip-main end

}